 //引入依赖包
const gulp = require('gulp')
const uglify = require('gulp-uglify')
const babel = require('gulp-babel')
const css = require('gulp-clean-css')
const sass = require('gulp-sass')
const htmlmin = require('gulp-htmlmin')
const connect = require('gulp-connect')
const del = require('del')


//定义各资源相关的路径
const paths = {
    css: {
        src: 'src/css/**/*.css',
        dest: 'dist/css'
    },
    js: {
        src: 'src/js/**/*.js',  //来源
        dest: 'dist/js',        //目标路径
    },
    scss: {
        src: 'src/scss/**/*.scss',
        dest: 'dist/css'
    },
    html: {
        src: 'src/**/*.html',
        dest: 'dist'
    },
    libs: {
        src: 'src/libs/**/*.*',
        dest: 'dist/libs'
    },
    image: {
        src: 'src/images/**/*.*',
        dest: 'dist/images'
    },
    mock: {
        src: 'src/mock/**/*.json',
        dest: 'dist/mock'
    },
};
    
//定义任务函数，实现JS文件处理
const script = () => {
    return gulp.src(paths.js.src)
    .pipe(babel({
        presets:['env']
    }))
    .pipe(uglify())   //压缩
    .pipe(gulp.dest(paths.js.dest)) //放到目标目录中
    .pipe(connect.reload()) //刷新浏览器
}

//定义处理CSS文件资源的任务
const styles = () => gulp.src(paths.css.src)    //选择“源”
    .pipe(css())                        //调用函数，进行处理
    .pipe(gulp.dest(paths.css.dest))    //目标路径
    .pipe(connect.reload())

    //编译scss文件
    const scsses = () => gulp.src(paths.scss.src)
        .pipe(sass({outputStyle:'compressed'}))
        .pipe(gulp.dest(paths.scss.dest))
        .pipe(connect.reload())

    //html 文件压缩
    const htmls = () => gulp.src(paths.html.src)
    .pipe(htmlmin({ collapseWhitespace:true, minifyJS:true, minifyCSS:true}))
    .pipe(gulp.dest(paths.html.dest))
    .pipe(connect.reload())

    //复制 libs、images 目录下的资源
    const copyLibs = () => gulp.src(paths.libs.src)
        .pipe(gulp.dest(paths.libs.dest))
    const copyImages = () => gulp.src(paths.image.src)
        .pipe(gulp.dest(paths.image.dest))
    const copyMock = () => gulp.src(paths.mock.src)
        .pipe(gulp.dest(paths.mock.dest))
    const copy = gulp.parallel(copyLibs,copyImages,copyMock)

    //清理dist目录
    const clean = () => del(['dist'])

    //监视任务
    const watch = () => {
        gulp.watch(paths.js.src, script)
        gulp.watch(paths.css.src, styles)
        gulp.watch(paths.scss.src, scsses)
        gulp.watch(paths.html.src, htmls) 
    }

    //启动webserver
    const server = () => {
        connect.server({
            root:'dist',   //启动服务器时，指定webserver 的根目录
            port:3000,  //端口
            livereload:true,    //启动浏览器自动刷新功能
        })
    }

    //定义构建人物，组织流程
    const build = gulp.series(clean,gulp.parallel(script, styles, scsses, htmls, copy, watch, server))
    //series表示执行顺序，parallel表示同时执行括号内的任务

    //导出任务，在命令行中执行`gulp 任务名称`可执行指定任务
    exports.script = script
    exports.styles = styles
    exports.scsses = scsses
    exports.htmls = htmls
    exports.watch = watch
    exports.server = server

    //导出默认任务，即在命令行中直接使用`gulp`可执行到的任务
    exports.default = build